<template>
  <page-card title="系统帮助">
    <div class="public-list">
      <div class="public-list-tools">
        <a-row type="flex"
               style="margin-bottom:20px"
               justify="start">
          <a-col flex="1">
            <a-space :size="20">
              <a-button type="primary"
                        icon="plus"
                        action
                        @click="handleEdit('')">
                新增
              </a-button>
              <a-button type="primary"
                        :disabled="!hasSelected"
                        @click="handleBatchDelete">
                批量删除
              </a-button>
            </a-space>
          </a-col>
          <a-col>
            <a-input-search v-model="params.keyword"
                            placeholder="输入关键字"
                            allow-clear
                            @search="search" />
          </a-col>
        </a-row>
      </div>
      <div class="public-list-panel">
        <a-table :columns="columns"
                 :data-source="dataList"
                 :rowKey="(item, index) => item.id"
                 :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                 @change="handleTableChange"
                 :pagination="pagination">
          <span slot="action"
                slot-scope="text, item">
            <template>
              <a @click="handleEdit(item.url)">编辑</a>
            </template>
            <a-divider type="vertical" />
            <template>
              <a-popconfirm title="确定要删除吗？"
                            ok-text="是"
                            cancel-text="否"
                            @confirm="handleDelete(item.id)">
                <a href="javascript:;">删除</a>
              </a-popconfirm>
            </template>
          </span>
        </a-table>
      </div>

    </div>
  </page-card>
</template>

<script>
import { PAGINATION } from '../../constants'
import { getHelpList, deleteHelpInfo } from '../../api/help/index'

export default {
  name: 'HelpList',
  extends: null,
  mixins: [],
  components: {},
  props: {},
  data () {
    return {
      pagination: PAGINATION,
      params: {
        keyword: ''
      },
      selectedRowKeys: [], // 选中项数组
      dataList: [],
      columns: [
        {
          title: '页面路径',
          align: 'center',
          dataIndex: 'url',
          ellipsis: true,
          scopedSlots: { customRender: 'url' }
        }, {
          title: '标题',
          align: 'center',
          dataIndex: 'title',
          ellipsis: true,
          scopedSlots: { customRender: 'title' }
        }, {
          title: '操作',
          width: 130,
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  computed: {
    hasSelected () {
      return this.selectedRowKeys.length > 0
    }
  },
  watch: {},
  created () {
    if (!this.$route.meta.keepAlive) {
      this.getList()
    }
  },
  activated () {
    this.getList()
  },
  mounted () { },
  methods: {
    // 搜索
    search () {
      this.dataList = []
      this.pagination.current = 1
      this.getList()
    },

    // 列表数据
    getList () {
      let params = {
        currPage: this.pagination.current,
        pageSize: this.pagination.pageSize,
        keyword: this.params.keyword
      }
      getHelpList(params).then(res => {
        this.dataList = res.list
        this.pagination.current = Number(res.currPage)
        this.pagination.pageSize = Number(res.pageSize)
        this.pagination.total = Number(res.totalCount)
      })
    },

    // 新增、修改
    handleEdit (url) {
      this.$router.push({
        path: '/help/edit',
        query: { url: url }
      })
    },

    // 删除
    handleDelete (id) {
      deleteHelpInfo(id).then((res) => {
        this.getList()
      })
    },

    // 批量删除
    handleBatchDelete () {
      let me = this
      this.confirm({
        title: '提示',
        content: '确定要删除吗？',
        okText: '是',
        cancelText: '否',
        onOk () {
          deleteHelpInfo(me.selectedRowKeys).then(res => {
            me.selectedRowKeys = []
            me.getList()
          })
        },
        onCancel () { }
      })
    },

    // 选中项发生变化
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    // 分页、排序、筛选变化时触发
    handleTableChange (pagination, filters, sorter) {
      this.pagination = pagination
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
.help-list {
}
</style>